<template>
  <div id="cate">
  
 
   <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/about' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

<el-card >

   <el-button type="success" @click='add'>添加</el-button>

<el-dialog
  title="添加"
  :visible.sync="dialogVisible"
  @close="updows('desss')"
  width="40%">
  <el-form ref="desss" :model="forms"  label-width="20px">
   <el-form-item  >
    <el-input placeholder="请输入内容" v-model="forms.cat_name">
      <template slot="prepend">用户</template>
    </el-input>
   </el-form-item>
    <el-form-item >
       <el-cascader
        clearable
       change-on-select
        expandTrigger="hover"
       v-model="values" 
      :props='pos'
      :options="fulist"
      @change="handleChange"
    
  ></el-cascader>
       
    </el-form-item>
    
  </el-form>
   
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible=false">取 消</el-button>
    <el-button type="primary" @click="submitForm()">确 定</el-button>
  </span>
</el-dialog>



   <tree-table
    :data="list"
    :columns="columns"
    :selection-type="false"
    :expand-type='false'
    show-index
    index-text="#"
    border
    show-row-hover
   > 
 <template slot="ors" slot-scope="scope">
 <i class="el-icon-success" style="color:lightgreen;font-size:19px" v-if="scope.row.cat_deleted===false"></i>
 <i class="el-icon-error" v-else></i>
 </template>

  <template slot="paxu" slot-scope="scope">
 <el-button type="primary" plain v-if="scope.row.cat_level===0">一级</el-button>
  <el-button type="success" plain v-if="scope.row.cat_level===1">二级</el-button>
  <el-button type="danger" plain v-if="scope.row.cat_level===2">三级</el-button>
 </template>

  <template slot="caozuo" slot-scope="scope">
   <el-button type="primary" icon="el-icon-edit" @click="edil(scope.row)">编辑</el-button>

  <el-button type="danger" icon="el-icon-delete" @click="deletes(scope.row)">删除</el-button>
  </template>

</tree-table>
 <el-dialog
  title="编辑"
  :visible.sync="edile"
  width="40%">
    <el-input placeholder="请输入内容" v-model="rowca">
      <template slot="prepend">用户</template>
    </el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="edile=false">取 消</el-button>
    <el-button type="primary" @click="es">确 定</el-button>
  </span>
</el-dialog>

<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="form.pagenum"
      :page-sizes="[1, 2, 3, 4,5,6,7,8,9,10,15]"
      :page-size="form.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


</el-card>
 

  </div>
</template>
<script>

  
export default {
name:'Categoods',
  data() {
    return{
      form:{
        type:3,
         pagenum:1,
         pagesize:5
      },
      pos:{
      value:'cat_id',
      label:'cat_name',
      children:'children'
      },
      dialogVisible:false,
     forms:{
        cat_pid:0,
        cat_name:'',
        cat_level:0
     },
     rowca:'',
     values:[],
      list:[],
      fulist:[],
      edile:false,
      rid:'',
      rowca:'',
      total:0,
     
      columns: [
          {
            label: '分类名称',
            prop: 'cat_name',
            width: '400px',
          },
          {
            label: '是否有效',
            prop: 'cat_deleted',
            minWidth: '50px',
             type: 'template',
            template: 'ors',
          },
          {
            label: '排序',
            prop: 'cat_level',
             type: 'template',
            template: 'paxu',
          },
          {
            label: '操作',
            prop: 'likes',
            minWidth: '200px',
             type: 'template',
            template: 'caozuo',
          
          },
        ],


      
    }
  },
  created(){
  this.getlist()
 
  },
  methods:{
    updows(desss){
      // 
    var as= this.$refs[desss].resetFields()
   
    },
    handleChange(){
      if (this.values.length>0) {
       this.forms.cat_pid= this.values[this.values.length-1]
        this.forms.cat_level=this.values.length
      }else{
        if (this.values.length===0) {
           this.forms.cat_pid= 0
        this.forms.cat_level=0
        }
      }
    },
   async getfulist(){
      const {data:res}=await this.$http.get('categories',{params:{type:2}})
      this.fulist=res.data
     
     console.log(res.data);
    },
   async getlist(){
     const {data:res}=await this.$http.get('categories',{params:this.form})
     
     
     this.total=res.data.total
     this.list=res.data.result
   
    // this.forms.cat_pid=res.data.result[0].cat_pid
    // this.forms.cat_name=res.data.result[0].cat_name
    // this.forms.cat_level=res.data.result[0].cat_level
   
    
    },
   async deletes(row){
       const {data:res}=await this.$http.delete(`categories/${row.cat_id}`)
       this.$message.success('删除成功')
       this.getlist()
    },
   add(){
      this.getfulist()
     
      this.dialogVisible=true
    },
    handleSizeChange(val){
      this.form.pagesize=val
      this.getlist()
    },
    handleCurrentChange(val){
      this.form.pagenum=val
      this.getlist()
    },
   async  submitForm(){
       if ( !this.forms.cat_name) {
          return this.$message.error('必须填入')
     }else{
     console.log(this.forms);
    const {data:res}=await this.$http.post('categories',this.forms)
    console.log(res);
    this.$message.success('添加成功')
      this.getlist()
      this.dialogVisible=false
   
     }
    
    },
  edil(row){
    this.rid=row.cat_id
     this.edile=true
    
     this.rowca=row.cacat_name
    
    
  
   },
   async es(){
     const{data:res}=await this.$http.put(`categories/${this.rid}`,{cat_name:this.rowca})
  
   this.$message.success('编辑成功')
     this.getlist()
     this.edile=false
   }
  }
}
</script>


<style lang="less" scoped>

.el-card{
  margin-top: 20px;
}
/deep/.el-card__body{
line-height: 20px; 
text-align: left;
}
</style>
